<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            margin: 0 auto;
        }
        
        .main {
            width: 50%;
            height: 50%;
            /* background-color: slateblue; */
            background: hsla(108, 50%, 80%, 0.3);
            margin: 0 auto;
            margin-bottom: 60px;
        }
        
        .main p {
            text-align: center;
            line-height: 150px;
            /* background: rgb(red, green, blue); */
        }
        /* input { */
        /* margin: 0 8px; */
        /* outline: none;
            appearance: none;
        } */
        /* 这里不考虑浏览器的兼容性 */
        /*控制内部显示  */
        /* .info input[type="range"] {
            width: 100px;
            -webkit-appearance: none;
            height: 8px;
            border-radius: 4px;
            background: -webkit-linear-gradient(#ffa200, #ffa200) no-repeat white; */
        /* background-size: 50% 100%; */
        /* 因为周期默认value=0.50正好占50% */
        /* } */
        /* -webkit-slider-thumb仅对谷歌浏览器有效 */
        /* 控制滑动圆圈 */
        /* .info input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            background-color: #aaa;
            width: 8px;
            height: 16px;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .info input[type="range"]::-webkit-slider-thumb:hover {
            background: #666;
        } */
        /* 左侧渐变色的写法,默认滑块在最左侧所以下面white为0% */
        /* .info #speed {
            background: linear-gradient(to right, #ffa200, white 0%, white);
            background-size: 100% 100%;
        } */
    </style>
</head>

<body>
    <div class="box">
        <div class="main">
            <p>HSL(100,50%,70%,0.3)</p>
        </div>
        <div class="info">
            <form action="" id="form">
                Hue:
                <input type="range" name="gerColor" value="108" min="0" max="360" id="h"><br> Saturation:
                <input type="range" name="gerColor" value="50" min="0" max="100" id="s"><br> Lightness:
                <input type="range" name="gerColor" value="70" min="0" max="100" id="l"><br> Alpha:
                <input type="range" name="gerColor" value="3" min="0" max="10" id="a">
            </form>
        </div>
    </div>
    <script>
        let main = document.querySelector('.main');
        let info = document.querySelector('.info');
        let p = document.querySelector('.main').querySelector('p');

        // console.log(main);
        // console.log(info);
        // console.log(p);
        info.addEventListener('input', function() {
            let h = document.querySelector('#h');
            let s = document.querySelector('#s');
            let l = document.querySelector('#l');
            let a = document.querySelector('#a');
            // console.log(r.value);
            let hval = h.value;
            let sval = s.value + '%';
            let lval = l.value + '%';
            let aval = a.value / 10;
            main.style.background = 'hsla(' + hval + ' ,' + sval + ' ,' + lval + ',' + aval + ')';
            // 'url(' + this.src + ')';
            p.innerHTML = 'hsla(' + hval + ',' + sval + ',' + lval + ',' + aval + ')';
        })
    </script>
</body>

</html>